class myscope {
    constructor () {
        this.scope = document.querySelector('.scope')

        this.smallBox = document.querySelector('.small-box')
        this.smallBoxWidth = this.smallBox.offsetWidth
        this.smallBoxHeight = this.smallBox.offsetHeight

        this.square = document.querySelector('.square')
        this.squareWidth = this.square.offsetWidth
        this.squareHeight = this.square.offsetHeight
        this.scopeImg = document.querySelector('.square img')
        this.scopeImgWidth = this.scopeImg.offsetWidth
        this.scopeImgHeight = this.scopeImg.offsetHeight
        this.init()
        this.bindEvent()
    }

    init () {
        this.square.style.left = 0
        this.square.style.top = 0
    }

    creatFragment () {

    }

    bindEvent () {
        let _this = this
        this.smallBox.onmouseenter = function () {
            _this.show()
        }
        this.smallBox.onmousemove = function (e) {
            e = e || event
            var x = e.offsetX
            var y = e.offsetY
            _this.move(x, y)
        }
        this.smallBox.onmouseleave = function () {
            _this.hide()
        }
    }

    show () {
        this.square.style.visibility = 'visible'
        this.scopeImg.style.visibility = 'visible'
    }

    move (x, y) {
        x = x - this.squareWidth / 2
        y = y - this.squareHeight / 2
        if (x < 0) {
            x = 0
        }
        if (y < 0) {
            y = 0
        }
        if (x > this.smallBoxWidth - this.squareWidth) {
            x = this.smallBoxWidth - this.squareWidth
        }
        if (y > this.smallBoxHeight - this.squareHeight) {
            y = this.smallBoxHeight - this.squareHeight
        }
        this.square.style.left = x + 'px'
        this.square.style.top = y + 'px'
        this.scopeImg.style.left = -this.scopeImgWidth * x * 1.27 / this.smallBoxWidth + 'px'
        this.scopeImg.style.top = -this.scopeImgHeight * y * 1.27 / this.smallBoxHeight + 'px'
    }

    hide () {
        this.square.style.visibility = 'hidden'
        this.scopeImg.style.visibility = 'hidden'
    }
}